<template>
   <div id = "main" style = "width: 100%;height:400px;" ></div>
</template>

<script>
import * as echarts from 'echarts';
import lodash from 'lodash'

export default {
    data(){
        return{
          chartDom: "",
      myChart: "",
      option: "",
        }
    },
    created(){
      
    },
    mounted() {
    this.$nextTick(() => {
      this.chartDom = document.getElementById("main");
      this.myChart = echarts.init(this.chartDom);
      this.initChart();
    });
    },
    methods:{
      initChart() {
      // return;
      this.option = {
        radar: {
          // shape: 'circle',
          radius: "66%",
          center: ["50%", "42%"],
          alignTicks: false,
          splitNumber: 8,
          splitArea: {
            areaStyle: {
              color: "rgba(127,95,132,.3)",
              opacity: 1,
              shadowBlur: 45,
              shadowColor: "rgba(0, 0, 0, 0.5)",
              shadowOffsetX: 0,
              shadowOffsetY: 15,
            },
          },
          indicator: [
            { name: "销售", max: 6500 },
            { name: "政府", max: 16000 },
            { name: "信息技术", max: 30000 },
            { name: "客户支持", max: 38000 },
            { name: "发展", max: 52000 },
            { name: "市场", max: 25000 },
          ],
        },
        legend: {
          left: "center",
          bottom: "10",
          data: ["分配预算", "预计支出", "实际支出"],
        },
        series: [
          {
            type: "radar",
            symbolSize: 0,
            areaStyle: {
              normal: {
                shadowBlur: 13,
                shadowColor: "rgba(0,0,0,.2)",
                shadowOffsetX: 0,
                shadowOffsetY: 10,
                opacity: 1,
              },
            },
            data: [
              {
                value: [5000, 7000, 12000, 11000, 15000, 14000],
                name: "分配预算",
              },
              {
                value: [4000, 9000, 15000, 15000, 13000, 11000],
                name: "预计支出",
              },
              {
                value: [5500, 11000, 12000, 15000, 12000, 12000],
                name: "实际支出",
              },
            ],
          },
        ],
      };
      this.option && this.myChart.setOption(this.option);
      window.addEventListener("resize", this.handle);
    },
    handle(){
        this.myChart.resize()
    }
    }
}
</script>

<style lang="scss" scoped>

</style>